import {
    View,
    ScrollView,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    Animated,
    RefreshControl,
    Button,
    ViewPropTypes, StyleProp, ViewStyle, TextStyle
} from 'react-native'
import React, {Component} from 'react'
import {screenWidth} from "../../style";

interface PageCategoryBarProps {
    itemWidth?: number,
    activeTextColor?: string,
    inactiveTextColor?: string,
    textColor?: string,
    textStyle?: StyleProp<TextStyle>,
    scrollValue?: Animated.Value,
    separatorMargin?: number,
    underlineStyle?: StyleProp<ViewStyle>,
    style?: StyleProp<ViewStyle>,
    tabs?: Array<any>,
    renderTab?: any,
    activeTab?: any,
    goToPage?: any,
    backgroundColor?: string,
    tabStyle?: StyleProp<TextStyle>
}
/***
 * 滚动在一屏幕内
 */
class PageCategoryBar extends Component<PageCategoryBarProps> {
    constructor(props) {
        super(props);
    }

    public refs: {
        tabScrollView: any
    };


    static defaultProps = {
        activeTextColor: 'navy',
        inactiveTextColor: 'black',
        backgroundColor: null,
        separatorMargin: 0
    };


    _tabPress = (pressHandle, page) => _ => {
        const itemWidth = this.props.itemWidth;
        //第几个正好居中,选居中的前一个元素
        const centerNum = Math.floor((screenWidth / itemWidth) / 2) - 1;
        let targetScrollNum = (page - centerNum) * itemWidth;
        if (targetScrollNum < 0) targetScrollNum = 0;


        const numberOfTabs = this.props.tabs.length;
        let containerWidth = itemWidth * numberOfTabs;
        const maxScrollArea = containerWidth - screenWidth;
        if (maxScrollArea > 0 && targetScrollNum > maxScrollArea) targetScrollNum = maxScrollArea;
        requestAnimationFrame(_ => {
            this.refs.tabScrollView.scrollTo({x: targetScrollNum, y: 0, animated: true});
            pressHandle(page);
        });
    };

    _renderTab = (name, page, isTabActive, onPressHandler) => {

        const {activeTextColor, inactiveTextColor, textStyle,} = this.props;
        const textColor = isTabActive ? activeTextColor : inactiveTextColor;
        return <TouchableOpacity
            style={{flex: 1}}
            key={name}
            accessible={true}
            accessibilityLabel={name}
            accessibilityTraits='button'
            onPress={this._tabPress(onPressHandler, page)}
        >
            <View style={[styles.tab, this.props.tabStyle]}>
                <Text style={[{color: textColor}, textStyle]}>
                    {name}
                </Text>
            </View>
        </TouchableOpacity>;
    }


    render() {
        const numberOfTabs = this.props.tabs.length;
        let containerWidth = this.props.itemWidth * numberOfTabs;
        containerWidth = containerWidth > screenWidth ? containerWidth : screenWidth;
        const separatorMargin = this.props.separatorMargin;
        const tabUnderlineStyle = {
            position: 'absolute',
            width: containerWidth / numberOfTabs - separatorMargin * 2,
            marginLeft: separatorMargin,
            height: 4,
            backgroundColor: 'navy',
            bottom: 0,
        };

        const translateX = this.props.scrollValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, containerWidth / numberOfTabs],
        });
        return (
            <View>
                <ScrollView horizontal={true}
                            bounces={false}
                            ref={"tabScrollView"}
                            showsHorizontalScrollIndicator={false}
                            contentContainerStyle={[styles.tabs, {
                                backgroundColor: this.props.backgroundColor,
                                width: containerWidth
                            }, this.props.style]}>
                    {this.props.tabs.map((name, page) => {
                        const isTabActive = this.props.activeTab === page;
                        const renderTab = this.props.renderTab || this._renderTab;
                        return renderTab(name, page, isTabActive, this.props.goToPage);
                    })}
                    <Animated.View
                        style={[
                            tabUnderlineStyle,
                            {
                                transform: [
                                    {translateX},
                                ]
                            },
                            this.props.underlineStyle,
                        ]}
                    />
                </ScrollView>
            </View>
        );
    }

}


const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabs: {
        height: 50,
        flexDirection: 'row',
        justifyContent: 'space-around',
        borderWidth: 1,
        borderTopWidth: 0,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        borderColor: '#ccc',
    },
});

export default PageCategoryBar;